<template>
	<view class="searchMaxBox">
		<!-- 搜索框 -->
		<view class="searchBox">
			<el-input placeholder="请搜索感兴趣的人" v-model="searchValue" prefix-icon='el-icon-search' />
			<el-button round @click='addSearch' input='input'>搜索</el-button>
		</view>
		<search-list v-if="IsPage" :searchData='searchData' @addHis='addHis'></search-list>
		<view v-else>
			<!-- 搜索历史 -->
			<view class="searchHistory" v-if="searchHistory.length !== 0">
				<view class="top">
					<h3>搜索历史</h3>
					<view class="iconBox" @click="empty">
						<i class='el-icon-delete'></i>
						清空
					</view>
				</view>
				<view class="conBox">
					<text v-for="item in searchHistory" :key="item.id" @click="hotClick(item.searchhistory)">{{item.searchhistory}}</text>
				</view>
			</view>
			<!-- 热门搜索 -->
			<view class="hotSearch">
				<view class="top">
					<h3>热门搜索</h3>
				</view>
				<view class="conBox">
					<text v-for="(item, index) in hotSearch" :key="item.id" @click="hotClick(item.hotSearch)">
						<i v-if="index < 3">{{index + 1}}</i>
						{{item.hotSearch}}
					</text>
					<!-- <text @click="router('/pages/questions/detail')">崔医生</text> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import searchList from './noPages/searchLise.vue'

	export default {
		name: 'searchPage',
		data() {
			return {
				searchValue: '',
				searchHistory: [],
				hotSearch: [],
				IsPage: false,
				searchData: []
			};
		},
		components: {
			searchList
		},
		methods: {
			router(path) {
				uni.navigateTo({
					url: path
				})
			},
			// 获取搜索历史
			getMjtSearchHistoryData() {
				this.$api.getMjtSearchHistory().then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.searchHistory = res.data.sort((a, b) => {
							return b.id - a.id
						})
					}
				})
			},
			// 获取热门搜索数据
			getMjtHotSearchData() {
				this.$api.getMjtHotSearch().then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.hotSearch = res.data
					}
				})
			},
			// 添加历史记录
			addSearch() {
				// console.log(this.searchValue)
				let oldSearch = ''
				let isChongfu = this.searchHistory.some(item => item.searchhistory == this.searchValue ? oldSearch = item :
					'')
				if (this.searchValue !== '') {
					// console.log(this.searchValue)
					this.$api.getMjtDoctorName(this.searchValue).then(res => {
						// console.log(res)
						if (res.code == 200 && res.data.length !== 0) {
							uni.navigateTo({
								url: `/pages/questions/detail?id=${res.data[0].id}`
							})
						} else {
							uni.navigateTo({
								url: `/pages/questions/detail?id=${0}`
							})
						}
					})
					if (isChongfu) {
						this.$api.deleteMjtSearchHistory(oldSearch.id).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.$api.postMjtSearchHistory({
									searchhistory: oldSearch.searchhistory
								}).then(res => {
									// console.log(res)
									if (res.code == 200) {
										this.getMjtSearchHistoryData()
										this.searchValue = ''
									}
								})
							}
						})
					} else {
						this.$api.postMjtSearchHistory({
							searchhistory: this.searchValue
						}).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.getMjtSearchHistoryData()
								this.searchValue = ''
							}
						})
					}
				} else {
					uni.showToast({
						title: '请您认真填写输入内容',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 子组件触发
			addHis(name) {
				this.searchValue = name
				this.addSearch()
			},
			// 清空历史搜索
			empty() {
				this.searchHistory.forEach(item => {
					// console.log(item.id)
					this.$api.deleteMjtSearchHistory(item.id).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.getMjtSearchHistoryData()
						}
					})
				})
			},
			// 热门搜索事件
			hotClick(name) {
				this.searchValue = name
			}
		},
		created() {
			this.getMjtHotSearchData()
			this.getMjtSearchHistoryData()
		},
		watch: {
			searchValue: {
				handler(newValue, oldValue) {
					if (newValue !== '') {
						this.IsPage = true
						this.$api.getMjtDoctor().then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.searchData = res.data.filter(item => item.doctorName.includes(newValue) ?
									item : '')
							}
						})
					} else {
						this.IsPage = false
					}
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style lang="less">
	.searchMaxBox {
		width: 100vw;
		height: calc(100vh - 88upx);
		margin: 0;
		padding: 0;
		background-color: rgb(240, 240, 240);

		.searchBox {
			height: 8vh;
			background: rgb(240, 240, 240);
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.el-input ::v-deep {
				width: 70%;
			}

			.el-button ::v-deep {
				border-radius: 20upx;
			}

			::v-deep .el-input__inner {
				border-radius: 14upx;
			}
		}

		.searchHistory {
			padding: 40upx;
			background: white;

			.top {
				padding-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2upx solid rgba(203, 203, 203, 0.5);

				i {
					margin-right: 20upx;
				}
			}

			.conBox {
				padding-top: 20upx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;

				text {
					width: 33%;
					text-align: center;
					margin: 20upx 0;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}
			}
		}

		.hotSearch {
			margin-top: 40upx;
			padding: 40upx;
			background: white;

			.top {
				padding-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2upx solid rgba(203, 203, 203, 0.5);

				i {
					margin-right: 20upx;
				}
			}

			.conBox {
				padding-top: 20upx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;

				text {
					width: 33%;
					text-align: center;
					margin: 20upx 0;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；

					i {
						display: inline-block;
						width: 15px;
						border-radius: 50%;
						margin-right: 5px;
						font-size: 12px;
						font-style: normal;
						color: white;
					}
				}
			}
		}

		.conBox text:nth-child(1) {
			i {
				background-color: rgb(143, 195, 31);
			}
		}

		.conBox text:nth-child(2) {
			i {
				background-color: rgb(193, 230, 114);
			}
		}

		.conBox text:nth-child(3) {
			i {
				background-color: rgb(203, 203, 203);
			}
		}

		.conBox text:nth-child(3n+1) {
			display: flex;
			justify-content: flex-start;
		}

		.conBox text:nth-child(3n+2) {
			display: flex;
			justify-content: center;
		}

		.conBox text:nth-child(3n+3) {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>
